<template>
  <div class="rule-group">
    <el-dialog
      v-if="dialogVisible"
      title="查看信息"
      :visible.sync="dialogVisible"
      width="622px"
      :close-on-click-modal="false"
      top="30vh"
      >
      <el-table :data="tableData" border fit style="width: 100%" header-cell-class-name="table-header-cell">
          <el-table-column label="规则组名称" align="center" prop="name" />
          <el-table-column label="规则数量" align="center" prop="count" />
          <el-table-column label="预警数据源" align="center" prop="source" />
          <el-table-column label="规则描述" align="center" prop="desc" />
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click.native="handleView(scope)"
              >查看</el-button>
            </template>
          </el-table-column>
      </el-table>
      <span slot="footer"></span>
    </el-dialog>
    <RuleItem :data="ruleDetails" :visible.sync="ruleItemVisible"/>
  </div>
</template>
<script>
import RuleItem from '@/views/maintenance/pages/warning-rule/components/rule-group/components/rule-item/index.vue'

export default {
  name: 'RuleGroup',
  components: {
    RuleItem
  },
  props: {
    visible: Boolean,
    tableData: Array
  },
  data(){
    return {
      ruleDetails: null,
      ruleItemVisible: false
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    },
  },
  watch: {
    ruleItemVisible(val) {
      if(!val){
        this.ruleDetails = null
      }
    }
  },
  methods: {
    handleView(val) {
      this.ruleDetails = val.row.ruleDetails
      this.ruleItemVisible = true
    }
  }
};
</script>

